<template>
  <div id="map" style="height: 600px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
let myChart = null;
let folderMap = {
  0: "",
  1: "geometryProvince/",
  2: "geometryCouties/"
};
let history = [{ name: "china", id: 0 }];
let option = {
  series: [
    {
      type: "map",
      name: "name",
      roam: true,
      map: "china",
      layoutCenter: ["50%", "50%"],
      layoutSize: "100%",
      // left: 0, top: 0, right: 0, bottom: 0,
      // zoom: 1.5,
      nameMap: {
        china: "中国"
      },
      label: {
        show: true,
        position: "insideTopRight"
      },
      // emphasis: {
      //   disabled: true
      // },
      itemStyle: {
        areaColor: "#eee",
        borderColor: "#fff",
        borderType: "dotted",
        color: "#000",
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: "1"
      },
      select: {
        label: {
          show: true,
          color: "#aaa"
        }
      },
      data: [{ name: "Alabama", value: 4822023 }]
      // labelLayout(params) {
      //   return {
      //     x: params.rect.x + 10,
      //     y: params.rect.y + params.rect.height / 2,
      //     verticalAlign: "middle",
      //     align: "left",
      //     // hideOverlap: true,
      //     labelLine: {
      //       show: true,
      //       showAbove: true,
      //       smooth: true
      //     }
      //   };
      // }
    }
  ],
  visualMap: {
    left: "right",
    min: 500000,
    max: 38000000,
    inRange: {
      color: [
        "#313695",
        "#4575b4",
        "#74add1",
        "#abd9e9",
        "#e0f3f8",
        "#ffffbf",
        "#fee090",
        "#fdae61",
        "#f46d43",
        "#d73027",
        "#a50026"
      ]
    }
  }
};
let currentData = {};
onMounted(async () => {
  let china = await import("./mapData/china.json");
  currentData = china.default;
  echarts.registerMap("china", currentData);
  myChart = echarts.init(document.getElementById("map"));
  myChart.setOption(option);
  myChart.on("click", async function (params) {
    cilckMap(params);
    echarts.registerMap(params.name, currentData);
    console.log(params.name, currentData,'current')
    option.series[0].map = params.name;
    myChart.setOption(option);
  });
});
const cilckMap = async (params) => {
  if (params.componentSubType != "map") return;
  console.log(params, "params");
  let currentItem = {
    id: currentData.features[params.dataIndex - 1].properties.id,
    name: params.name
  };
  if (history.length < 3) {
    history.push(currentItem);
  }
  await getMapJson(currentItem.id);
};
async function getMapJson(name) {
  let path = `./mapData/${folderMap[history.length - 1]}${name}.json`;
  const jsonData = await import(path);
  console.log(path,jsonData.default, "jsonData");
  currentData = jsonData.default;
}
</script>

<style></style>
